<template>
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :http-request="uploadImage"
    :before-upload="beforeAvatarUpload">
    <!-- 注意：
    vue2中action是（自动上传）地址 在本项目不需要（手动自定义上传），但是action不能删除，可以给个空属性值;

    http-request在文档中是一个属性名但是它的值是一个函数，所以添加时应用“:”而不是“@”
    像这种特殊的最好以文档为主;
    -->
    
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
// 引入腾讯云的sdk包
import COS from 'cos-js-sdk-v5'
export default {
  data() {
      return {
        
      }
    },
  // 注意：vue2中父子通信中,由于父组件是放在表单里，那么数据的双向绑定只能用v-model不能用其它名字，那么如果需要v-model实现组件之间双向绑定时，与其他一般情况下的父子通信不同，子组件的属性名必须为value，并且后续通知父组件用到的事件名必须为input，也就是子组件需要写this.$emit('input',...),而其它情况下的父子通信可以自定义 
  props:{
    value:{
      type:String,
      default:''
    }
  },
  methods: {
    // 上传前校验检查
    beforeAvatarUpload(file) {
      // 判断本项目支持图片文件类型：jpeg png gif bmp
      const isJPG=['image/jpeg','image/png','image/gif','image/bmp'].includes(file.type)
      // 判断上传文件大小,不能超过5MB
      const isLt2M = file.size / 1024 /1024 < 5;
      if (!isJPG) {
        this.$message.error('上传头像图只能是 JPG PNG GIF BMP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    // 前端页面在文件夹中选择好图片上传后触发回调，在这里会返回我们选择的文件对象参数信息
    uploadImage(params){
      // console.log(params.file);
      // 初始化COS对象
      const cos=new COS({
        // 应用标识
        SecretId:'AKIDZJuMdkkX6UkrmTzLXXlncGk2GTXbhqsm',
        // 应用密钥
        SecretKey:'oOlxymNo11pgS7mLiw112ucLuJXYt6BA'
      })
      // 使用cos中的putObject方法进行腾讯云上传
       cos.uploadFile({
        Bucket:'gcy-1384349814', // 存储桶名称
        Region: 'ap-guangzhou', // 地域名称
        Key: params.file.name, // 文件名称
        StorageClass: 'STANDARD', // 固定值
        Body: params.file // 文件对象
      }, (err, data) => {
        if (data.statusCode === 200 && data.Location) {
          // 拿到了腾讯云返回的地址
          // 通过input自定义事件将地址传出去
          this.$emit('input', 'http://' + data.Location) // 将地址返回了
        } else {
          this.$message.error(err.Message) // 上传失败提示消息
        }
      })

    }
  }

}
</script>  

<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>